<template>
	<view class="container-withdraw">
		<view class="withdraw-view">
			<view class="lang-top">
				<view class="backIcon" @click="back()">
					<uni-icons type="left" size="26" color="#fff"></uni-icons>
				</view>
				<view class="langText">
					{{$t('账户充值')}}
				</view>
				<view class="clearView"></view>
			</view>
		</view>
		<view class="content-view">
			<view class="available-balance-view">
				<p class="available-balance">$<span>{{user.balance}}</span></p>
				<p class="balance-text">{{$t('我的可用余额')}}</p>
			</view>
		</view>
		
		<view class="withdraw_wrap">
			<p class="withdraw_wrap_text">{{$t('请输入充值金额')}}</p>
			<view class="flex_center">
				<span class="sign">$</span>
				<input v-model="rechargeValue" type="number" step="0.01" :placeholder="$t('请输入充值金额')+'$'+user.balance" class="inp">
				<span class="approximately">≈￥<b class="noBlod" v-if="rechargeValue==''">0.00</b><b class="noBlod">{{rechargeValue}}</b></span>
			</view>
		</view>
		
		<view class="recharge_fs">
			<p class="tit"> {{$t('请选择支付方式')}} </p>
			<view class="uni-list">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
						<span>
							<radio :value="item.value" :checked="index === current" />
						</span>
						<span class="margin10">{{item.name}}</span>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="basic_btn" @click="tx">
			{{$t('下一步')}}
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				items: [
					{
				        value: 'all',
				        name: 'ALL-BANK',
				        checked: 'true'
				    },
				    {
				        value: 'usdt',
				        name: 'USDT'
				    }
				],
				current: 0,
				rechargeValue:'',
				user:{}
			}
		},
		onShow() {
		  this.getinfo()
		},
		methods:{
			tx(){
				let data = {
					num:this.rechargeValue
				}
				let that = this
				that.$http.post(
					'api/member_recharge/create',//接口名
					data,//参数合集
				).then(res=>{
					uni.showToast({
						icon: 'success',
						title: res.msg
					});
					setTimeout(function(){
						if(res.data.kefu_url){
							that.tianzhuan(res.data.kefu_url)
						}else{
							uni.switchTab({
								url:'/pages/my/index'
							})
						}
					},1500)
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'error',
						title: err.data.message
					});
				})
			},
			tianzhuan(href){
				//#ifdef APP-PLUS
				plus.runtime.openURL(href);
				//#endif
				//#ifdef H5
				window.open(href, '_blank');
				//#endif
				// window.open(href, '_blank');
			},
			getinfo(){
				this.$http.get(
					'api/user/index',//接口名
					{},//参数合集
					{},
					false
				).then(res=>{
					this.user = res.data
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'error',
						title: err.data.message
					});
				})
			},
			back(){
				uni.navigateBack({
					data:1
				})
			},
			radioChange: function(evt) {
				console.log(evt)
			    for (let i = 0; i < this.items.length; i++) {
			        if (this.items[i].value === evt.detail.value) {
			            this.current = i;
						console.log(this.items[i].value);
			            break;
			        }
			    }
			}
		}
	}
</script>

<style scoped>
	.container-withdraw{
		background-color: #f6f6f6;
	}
	.lang-top{
		display: flex;
		padding-left:10rpx;
		height:88rpx;
		line-height:88rpx;
		background-color: #3775f4;
		color:#fff;
	}
	.backIcon{
		width:20%;
	}
	.langText{
		font-size:36rpx;
		width:60%;
		text-align: center;
		
	}
	.clearView{
		width:20%;
	}
	.content-view{
		background: #fff;
		margin-left: 2%;
		margin: 20rpx;
		border-radius:12rpx;
	}
	.available-balance-view{
		background: #fff;
		padding: 40rpx 0;
		font-size:24rpx;
		text-align: center;
		border-radius:12rpx;
		margin-top:-120rpx;
	}
	.content-view>p{
		line-height:40rpx;
	}
	.withdraw-view{
		height: 252rpx;
		background: #3775f4;
	}
	.available-balance{
		font-size: 48rpx;
		font-weight: 700;
		margin-bottom: 30rpx;
		height:52rpx;
		line-height: 52rpx;
	}
	.balance-text{
		color: #999;
		font-weight: 700;
		font-size: 24rpx;
	}
	.available-balance-list{
		box-shadow: none;
		background: none;
		background-color: #fff;
		margin:20rpx;
		padding:40rpx;

		border-radius: 12rpx;
	}
	.available-purse-list{
		height:36rpx;
		line-height: 36rpx;
		
	}
	.available-purse-list>span{
		font-size: 32rpx;
		font-weight: 700;
		color: #999;
	}
	.available-purse{
		flex:1;
		font-size: 32rpx;
		font-weight: 700;
		color: #999;
	}
	
	.withdraw_wrap{
		background: #fff;
		border-radius: 12rpx;
		padding: 32rpx 40rpx;
		margin: 20rpx;
	}
	.withdraw_wrap_text{
		font-size: 32rpx;
		font-weight: 700;
		color: #999;
		margin-bottom: 40rpx;
		height:32rpx;
		line-height: 32rpx;
	}
	.flex_center {
	    display: flex;
	    justify-content: left;
	    align-items: center;
		margin-bottom: 40rpx;
	}
	.sign{
	    font-size: 36rpx;
	    margin-right: 20rpx;
	    font-weight: 700;
	}
	.inp{
	    height: 36rpx;
	    width: 60%;
	    line-height: 36rpx;
	    font-size: 28rpx;
	}
	.withdraw-tips{
		padding: 0 32rpx 28rpx 32rpx;
		line-height: 34rpx;
		font-size: 24rpx;
		color: #f12211;
	}
	.basic_btn {
		margin: 106rpx auto 0 auto;
		background: linear-gradient(90deg, #e4392e, #ff4d16);
	    height: 90rpx;
	    line-height: 90rpx;
	    font-size: 32rpx;
	    width: 90%;
	    border-radius: 46rpx;
	    color: #fff;
	    text-align: center;
	}
	
	.approximately{
		text-align: right;
		width:240rpx;
		font-size:28rpx;
		color:#999;
	}
	/* ---------- */
	.recharge_fs{
		margin-top: 10px;
		background: #fff;
		border-radius: 6px;
		padding: 0 16px;
	}
	.tit{
		height: 54px;
		line-height: 54px;
		border-bottom: 1px solid #ececec;
		font-size: 16px;
		color: #999;
		font-weight: 700;
	}
	/deep/.uni-label-pointer{
		display: block;
		height:114rpx;
		line-height: 114rpx;
		border-top:1px solid #ececec;
	}
	.margin10{
		margin-left:20rpx;
	}
	.noBlod{
		font-weight:normal
	}
</style>